<template>
  <div class="indexContainer">
    <img class="index_img" v-if="isShow" :src="userInfo.avatarUrl"></img>
    <button class="btn" open-type="getUserInfo" v-else="isShow"  lang="zh_CN" @getuserinfo="getUserInfo">
      获取用户信息
    </button>
    <p class="userName">hello {{userInfo.nickName}}</p>
    <div @tap="toDetail" class="goStudy" >
      <p >开启小程序之旅</p>
    </div>
  </div>

</template>

<script>
    export default {
      name: "index",
      data(){
        return {
          userInfo:[],
          isShow:false
        }
      },
      beforeMount(){
        this.handleGetUserInfo();
      },
      methods:{
        // 获取用户登录信息
        handleGetUserInfo(){
          wx.getUserInfo({
            success: (data) => {
              this.userInfo = data.userInfo;
              this.isShow = true;
            },
            fail: () => {
              console.log('获取失败');
            }
          })
        },
        getUserInfo(data){
          // 判断用户是否授权
          if(data.mp.detail.rawData){
            // 用户授权
            this.handleGetUserInfo();
          }
        },
        toDetail(){
          wx.switchTab({
            url:"/pages/list/main"
          });
        }

      }

    }
</script>

<style >
  page {
    background: #8ed145;
  }

  .indexContainer {
    display: flex; /*将对象作为弹性伸缩盒显示*/
    flex-direction: column; /*默认为row横向布局，column表示纵向布局*/
    align-items: center; /*居中*/
  }

  .index_img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx; /*添加圆角边框*/
    margin: 100rpx 0; /*rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。*/
  }

  .userName {
    font-size: 40rpx;
    font-weight: bold;
    margin: 100rpx 0;
  }

  .goStudy {
    width: 220rpx;
    height: 80rpx;
    border: 1rpx solid #eee;
    font-size: 24rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
  }

  .btn {
    width: 300rpx;
    height: 300rpx;
    border-radius: 150rpx;
    margin:50rpx 0;
    line-height: 300rpx;
    text-align: center;
    font-size: 26rpx;
  }

</style>
